<template>
  <view>
      <view class="film-box" v-for="(item) in List" :key="item.id" @click="commenton(item.id)">
        <view class="film-img">
          <image class="poster" :src="item.thumb" mode=""></image>
          
        </view>
        <view class="film-content">
          <view class="yp-box">
            <image class="comment" src="../../static/dp.png" mode=""></image>
            影评
          </view>
          <view class="film-title">{{item.title}}</view>
          <view class="film-time">点映时间:{{item.premiere_date}}</view>
          <view class="film-introduce">{{item.plot_summary}}</view>
        </view>
      </view>
     
  </view>
</template>
<script>
  export default  {
    
    data() {
    	return {
        List:[]
    		
    	};
    },
    onLoad() {
      this.getList()
      console.log(uni.getStorageSync('wbyun_token'),'99999997');
    }, 
    onPullDownRefresh() {
      setTimeout(()=> {
        this.getList()
        uni.stopPullDownRefresh()
      },1000)
    },
    onShareTimeline:function(res){
          return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            query: "inviteCode="+uni.getStorageSync('wbyun_icode')
          }
        },
    onShareAppMessage(res) {
      console.log(res);
      console.log(uni.getStorageSync('wbyun_icode'));
      return {
            title: '小帮观影，我的AI影评顾问',
            imageUrl:'https://www.iwangbang.com/skin/wx_mp_xbgy/share.jpg',
            path: '/pages/index/index?inviteCode=' + uni.getStorageSync('wbyun_icode')
          }
    },
    methods:{
      getList() {
        uni.request({
        	url: getApp().globalData.apiDomain+'movies/list',
        	method: 'POST',
        	header: {
        		'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
        		'token': uni.getStorageSync('wbyun_token'),
            'wbapp':'weixin_mp_xbgy'
        	},
        	data: {
            'page':'1',
            'limit':'5'
          },
        	dataType: 'json',
        	success:  res => {
            
        		if (res['data']['code'] == 200) {
              console.log(res['data']);
              this.List = res.data.datas
        			return;   
        		}else if(res['data']['code'] == '100500') {
              uni.showToast({
              	title:res['data']['msg'],   
              	icon: 'none'
              });
             
            } else { 
        			uni.showToast({
        				title: res['data']['msg'],
        				icon: 'none'
        			});
        		}
        	},
        	fail: () => {},
        	complete: () => {
        	}
        });
      },
        commenton(e) {
          console.log(e);
          uni.navigateTo({
            url: '/pages/remarks/remarks?id='+e,
            
          });
        }
    }
   
  }
</script>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    background-color: #F3F3F3;
  }
  .film-box {
    width: 96%;
    height: 300rpx;
    display: flex;
    background-color: #F3F3F3;
    margin:30rpx auto;
    border-bottom: 2px solid #fff;
  }
  .film-content {
    width: 100%;
    height: 270rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 15rpx;
    padding: 5rpx 0;
  }
  .poster {
    width: 210rpx;
    height: 270rpx;
    border-radius: 20rpx;
  }
  .film-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
        font-size: 40rpx;
  }
  .film-time {
    font-size: 27rpx;
    color: #969696;
  }
  .film-introduce {
    font-size: 29rpx;
   display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     overflow: hidden;
     text-overflow: ellipsis;
  }
  .yp-box {
     position: absolute;
     right: 0;
     margin-right: 40rpx;
     margin-top: 10rpx;
     display: flex;
     flex-direction: column;
     align-items: center;
     background-image: linear-gradient(to right, rgb(245, 112, 243),rgb(81, 109, 250) ) !important;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
  }
  .comment{
   width: 40rpx;
   height: 40rpx;
  
  
  }
</style>